<template>
	<view class="zhuye">
		<view class="banner_box">
			<swiper class="banner_swiper" current="" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="300" circular="true" indicator-color="#fff" indicator-active-color="#102d57">
				<swiper-item v-for="(item,index) in list" :key="index">
					<view class="swiper-item"><image class="img" :src="item" mode="aspectFill"></image></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="info">
			<view style="display: flex;padding: 30rpx 0 10rpx;justify-content: space-between;">
				<view class="title">{{title}}</view>
				<view class="r_bottom_r" >
					<view class="one" @click="jianshao()">-</view>
					<input class="input" type="text"  v-model="num" :value="num" />
					<view class="one1" @click="zengjia()">＋</view>
				</view>
			</view>
			<view class="bottom">
				<view class="b_left">
					<view class="coinbox">
						<image class="coin" src="../../static/images/coin.png" mode=""></image>
						<view class="">
							{{price}}
						</view> 
					</view>
					<view class="zhi">销量 {{sales}}</view>
				</view>
			</view>
			
		</view>
		<view class="guige">
			<view class="guiged"  @click="navtab(index)" v-for="item,index in gglist" :key="item.id" :class="{'zhong':gindex==index}">{{item.title}}</view>
		</view>
		<view class="sp_xiangqing">
			<view class="tit">商品详情</view>
			<view class="html" v-html="actrive"></view>
		</view>
		
		<view class="footer">
			
			<view class="cart_car">
				
				<view class="goumai" @click="lijigou()">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue"
	export default{
		components:{
			uniLoadMore
		},
		data(){
			return{
				title:'',
				price:'',
				sales:0,
				list:[],
				gglist:[],
				actrive:``,
				sp_num:8,
				num:1,
				userinfo:[],
				id:0,
				cateid:0,
				connum:0,
				ggid:0,
				gindex:0,
				from:''
			}
		},
		onLoad(option){
			this.from = option.from;
			uni.setNavigationBarTitle({
			    title: '商品详情'
			});
			
			this.userinfo=uni.getStorageSync('user');
			this.id=option.id;
			var that=this;
			if(this.from == 'sp'){
				var url = 'mallshop/getGoodDetailById';
			}else{
				var url = 'mall/getGoodDetailById';
			}
			this.$http.get(url,{'id':that.id}).
			then(function (response) {
				var data = response.data;
				that.title=data.goodName;
				that.price=data.goodNowPrice;
				that.cateid=data.goodCateId;
				that.sales=data.goodSaleNum;
				that.actrive=data.goodDetail;
				that.connum=0;
				that.list=data.goodImgsSrc;
				that.gglist=data.spec;
				that.ggid=data.spec[0]['id'];
				that.price=data.spec[0]['price'];
			}).catch(function (error) {
				console.log(error);
			});
			
		},
		onShow: function(){
		    
		},
		methods:{
			navtab(n){
				this.gindex = n;
				this.ggid=this.gglist[n]['id'];
				this.price=this.gglist[n]['price'];
			},
			lijigou(){
				if(this.from=='sp'){
					uni.redirectTo({
						url:'/pages/mallShopOrder/mallShopOrder?id='+this.id+'&num='+this.num+'&ggid='+this.ggid
					})
					return;
				}else{
					uni.redirectTo({
						url:'/pages/queren_dingdan/queren_dingdan?id='+this.id+'&num='+this.num+'&ggid='+this.ggid
					})
					return;
				}
				
			},
			lijiduihuan(){
				uni.redirectTo({
					url:'/pages/queren_dingdan/queren_dingdan?id='+this.id+'&num='+this.num+'&ztype=2'
				})
				/*uni.showToast({
					title:"敬请期待！",
					duration:2000,
					icon:'none'
				})*/
				return;
			},
			jianshao(){
				if(this.num>1){
					this.num--
				}else{
					uni.showToast({
						title:"不能再少了",
						duration:2000,
						icon:'none'
					})
				}
			},
			zengjia(){
				this.num++
			},
		}
	}
</script>
<style>
	page{
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.guige{
		background: #ffffff;
		margin: 20px 0 0 0;
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
		.guiged{
			width: auto;
			text-align: center;
			border: 1px solid #000000;
			border-radius: 5px;
			height: 30px;
			line-height: 30px;
			margin: 10px;
			padding:0 5px;
		}
		.zhong{
			border: 1px solid #102d57;
			color:#102d57;
		}
	}
	.coinbox{
		display: flex;
	}
	.coin{
		width:50rpx;
		height:50rpx;
	}
	.zhuye{
		width: 100%;
		padding-bottom: 50rpx;
		.banner_box{
			width: 100%;
			.banner_swiper{
				height: 400rpx;
				.swiper-item{
					height: 100%;
					.img{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.info{
			position: relative;
			background-color: #ffffff;
			padding: 0 20rpx;
			.title{
				width: 500rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #010101;
				font-size: 30rpx;
			}
			.r_bottom_r{
				display: flex;
				.one{
					text-align: center;
					color: #ffffff;
					background-color: #d2d2d2;
					width: 45rpx;
					line-height: 42rpx;
					height: 45rpx;
					font-size: 60rpx;
					border-radius: 3px 0 0 3px;
				}
				.input{
					font-size: 30rpx;
					line-height: 40rpx;
					text-align: center;
					width: 60rpx;
					height: 40rpx;
					border: 1px solid #d2d2d2;
				}
				.one1{
					text-align: center;
					color: #ffffff;
					background-color: #d2d2d2;
					width: 45rpx;
					height: 45rpx;
					// font-size: 50rpx;
					line-height: 45rpx;
					border-radius: 0 3px 3px 0;
				}
			}
			.bottom{
				.b_left{
					display: flex;
					height: 60rpx;
					align-items:center;
					justify-content: space-between;
					color: #102d57;
					font-size: 36rpx;
					.text{
						font-size: 28rpx;
					}
					.zhi{
						font-size: 26rpx;
						color: #a5a5a5;
					}
				}
			}
		}
		.sp_xiangqing{
			margin-top: 20rpx;
			padding: 0 20rpx 130rpx;
			background-color: #FFFFFF;
			.tit{
				line-height: 90rpx;
				color: #3b3b3b;
				font-size: 30rpx;
			}
			.html{
				width: 100%;
				line-height: 40rpx;
				font-size: 30rpx;
				/*color: #a5a5a5;*/
				box-sizing: border-box;
			}
		}
		.footer{
			border-top: 1px solid #eeeeee;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 110rpx;
			display: flex;
			background-color: #ffffff;
			.cart_car{
				width: 100%;
				display: flex;
				.jiaru{
					width: 50%;
					height: 110rpx;
					line-height: 110rpx;
					background-color: #d8d343;
					color: #FFFFFF;
					text-align: center;
					font-size: 30rpx;
				}
				.goumai{
					width: 100%;
					height: 110rpx;
					line-height: 110rpx;
					background-color: #102d57;
					color: #FFFFFF;
					text-align: center;
					font-size: 30rpx;
				}
				.goumai1{
					width: 100%;
					height: 110rpx;
					line-height: 110rpx;
					background-color: #102d57;
					color: #FFFFFF;
					text-align: center;
					font-size: 30rpx;
				}
			}
			.left1{
				&:after{
					content: "";
					position: absolute;
					width: 1px;
					left: 148rpx ;
					top: 24rpx;
					height: 60rpx;
					background-color: #dcdcdc;
				}
			}
			.left{
				width: 40%;
				height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.l_top_l{
					position: relative;
					text-align: center;
					.biaoji{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						right: 0;
						top: 0;
						font-size: 24rpx;
						background-color: #102d57;
						color: #FFFFFF;
						border-radius: 50%;
					}
					.l_img_l{
						width: 45rpx;
						height: 45rpx;
					}
					.text1{
						font-size: 24rpx;
						color: #a5a5a5;
					}
				}
			}
			.right{
				width: 50%;
				height: 110rpx;
				background-color: #102d57;
				font-size: 32rpx;
				color: #ffffff;
				text-align: center;
				line-height: 100rpx;
			}
		}
	}
</style>